import React from 'react';
import styled from 'styled-components';
import { Form, Button, Input, notification } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { doLogin } from '../api/login';
import { useHistory } from 'react-router';
import { AuthMessage } from '../model/user';

const Bg = styled.div`
    background: url('https://july-blog-1251618686.cos.ap-guangzhou.myqcloud.com/bundle_cloud/gamersky_07origin_13_20172182053DCE.jpg') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
`;

const StyledForm = styled.div`
    width: 30%;
    height: 100%;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
`;

const openNotification = (message: string, description?: string, time = 4) => {
    notification.open({
        message: message,
        description: (<div>{description}</div>),
        duration: time,
    });
};


function LoginForm() {
    const [form] = Form.useForm();

    const FormContainer = styled.div`
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
`;

    const FormFooter = styled.div`
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
`;

    const HintText = styled.span`
     color: #a7a7a7;
`;

    const history = useHistory();

    const onFinish = React.useCallback(async () => {
        const values: AuthMessage = form.getFieldsValue();
        try {
            const response = await doLogin(values);
            if (response.status === 200) {
                history.push('/dashboard');
            } else {
                openNotification('登录失败！', response.data);
            }
        } catch (err: any) {
            openNotification('登录失败！', err.message);
        }
    }, []);

    const onFinishFailed = React.useCallback(() => {
        const values = form.getFieldsValue();
        // console.log(values);
    }, []);


    return (
        <FormContainer>
            <Form
                form={form}
                style={{ width: '100%' }}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 24 }}
                initialValues={{ remember: true }}
                size="large"
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input prefix={<UserOutlined />} />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input.Password prefix={<LockOutlined />} />
                </Form.Item>
            </Form>

            <FormFooter>
                <div><HintText style={{ paddingRight: '20px' }}>Register</HintText><HintText>Forgot Password?</HintText></div>
                <Button type="primary" htmlType="submit" onClick={onFinish} >Submit</Button>
            </FormFooter>
        </FormContainer>
    );
}

function LoginHeader() {
    const StyledHeader = styled.div`
        width: 100%;
        height:60px;
        flex-grow: 0;
        position: relative;
        flex-shrink: 0;
        padding: 10px 20px;
        font-weight: bold;
        font-size: 16px;
    `;

    return <StyledHeader>
        Bundle Cloud
    </StyledHeader>;
}

function LoginBody(props) {
    const StyledBody = styled.div`
        flex-grow: 1;
        padding: 0 80px;
        display: flex;
        align-items: center;
    `;

    return <StyledBody>{props.children}</StyledBody>;
}

function LoginFooter() {
    const StyledFooter = styled.div`
        display: flex;
        width: 100%;
        height: 120px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 80px;
    `;

    const LoginWidth = styled.div`
        display: flex;
        font-size: 14px;
        color: #a7a7a7;
    `;

    const LoginWidthMethods = styled.div`
        display: flex;
        color: #6d82d6;
    `;

    return <StyledFooter>
        <LoginWidth>Login with</LoginWidth>
        <div style={{ display: 'flex' }}>
            <LoginWidthMethods style={{ paddingRight: '20px' }}>github</LoginWidthMethods>
            <LoginWidthMethods>wechat</LoginWidthMethods>
        </div>
    </StyledFooter>;
}


const LoginView = (props: { match: any, location: string, history: any }) => {
    // console.log(props);
    return (<Bg>
        <StyledForm>
            <LoginHeader />
            <LoginBody><LoginForm /></LoginBody>
            <LoginFooter />
        </StyledForm>
    </Bg>);
};

export default LoginView;